<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美食日记管理 - 美食社区</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" href="/css/layui.css">
    <style>
        .post-table {
            margin-top: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            border-radius: 8px;
            overflow: hidden;
        }
        .action-buttons .btn {
            margin-right: 5px;
        }
        .modal-body .form-group {
            margin-bottom: 15px;
        }
        .status-badge {
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 12px;
            font-weight: bold;
        }
        .status-published {
            background-color: #28a745;
            color: white;
        }
        .status-draft {
            background-color: #6c757d;
            color: white;
        }
        .section-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .btn-primary {
            background-color: #fd7e14;
            border-color: #fd7e14;
        }
        .btn-primary:hover {
            background-color: #e76b00;
            border-color: #e76b00;
        }
        .pagination .page-link {
            color: #fd7e14;
        }
        .pagination .active .page-link {
            background-color: #fd7e14;
            border-color: #fd7e14;
        }
        .post-content-preview {
            max-height: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>

<!-- 引入公共头部 -->
<div th:replace="common/header :: header"></div>

<div class="container mt-5 pt-3">
    <div class="row">
        <div class="col-12">
            <div class="dashboard-card">
                <div class="dashboard-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h2 class="mb-0"><i class="fas fa-utensils me-2"></i>美食日记管理</h2>
                        <div class="search-box">
                            <div class="input-group">
                                <input type="text" id="searchInput" class="form-control" placeholder="搜索标题或内容...">
                                <button class="btn btn-primary" id="searchBtn">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dashboard-card-body">
            
                    <!-- 美食日记列表 -->
                    <div class="table-responsive post-table">
                        <table class="table table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>标题</th>
                                    <th>作者</th>
                                    <th>分类</th>
                                    <th>浏览量</th>
                                    <th>点赞数</th>
                                    <th>发布时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="post : ${posts}">
                                    <td th:text="${post.title}"></td>
                                    <td th:text="${post.authorName}"></td>
                                    <td th:text="${post.categoryName}"></td>
                                    <td th:text="${post.views}"></td>
                                    <td th:text="${post.likes}"></td>
                                    <td th:text="${#dates.format(post.createTime, 'yyyy-MM-dd HH:mm')}"></td>
                                    <td class="action-buttons">
                                        <a class="btn btn-sm btn-primary" th:href="@{'/post/detail/' + ${post.id}}">
                                            <i class="fas fa-eye"></i> 查看
                                        </a>
                                        <button class="btn btn-sm btn-danger delete-post" th:data-id="${post.id}" 
                                                th:data-title="${post.title}">
                                            <i class="fas fa-trash-alt"></i> 删除
                                        </button>
                                    </td>
                                </tr>
                                <tr th:if="${#lists.isEmpty(posts)}">
                                    <td colspan="7" class="text-center py-4">暂无美食日记数据</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 分页 -->
                    <nav aria-label="Page navigation" th:if="${totalPages > 1}" class="mt-4">
                        <ul class="pagination justify-content-center">
                            <li class="page-item" th:classappend="${currentPage == 1 ? 'disabled' : ''}">
                                <a class="page-link" th:href="@{/admin/posts(page=${currentPage - 1}, keyword=${keyword})}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="page-item" th:each="i : ${#numbers.sequence(1, totalPages)}" 
                                th:classappend="${currentPage == i ? 'active' : ''}">
                                <a class="page-link" th:href="@{/admin/posts(page=${i}, keyword=${keyword})}" th:text="${i}"></a>
                            </li>
                            <li class="page-item" th:classappend="${currentPage == totalPages ? 'disabled' : ''}">
                                <a class="page-link" th:href="@{/admin/posts(page=${currentPage + 1}, keyword=${keyword})}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 删除美食日记模态框 -->

<!-- 删除确认模态框 -->
<div class="modal fade" id="deletePostModal" tabindex="-1" aria-labelledby="deletePostModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deletePostModalLabel"><i class="fas fa-exclamation-triangle text-danger me-2"></i>确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-3">
                    <i class="fas fa-trash-alt text-danger fa-3x mb-3"></i>
                    <p>确定要删除美食日记 <span id="deleteTitle" class="fw-bold"></span> 吗？</p>
                    <p class="text-danger"><small>此操作不可恢复！</small></p>
                </div>
                <input type="hidden" id="deletePostId">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">确认删除</button>
            </div>
        </div>
    </div>
</div>

<!-- 引入公共底部 -->
<div th:replace="common/footer :: footer"></div>

<!-- jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Bootstrap Bundle JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>
<!-- Layui JS -->
<script src="/js/layui.js"></script>
<script>
    $(document).ready(function() {
        // 查看美食日记
        $('.view-post').click(function() {
            const postId = $(this).data('id');
            // 显示加载动画
            const loadingIndex = layui.layer.load(2, {shade: [0.2, '#000']});
            // 获取美食日记信息
            $.get('/api/admin/post/' + postId, function(response) {
                // 关闭加载动画
                layui.layer.close(loadingIndex);
                if (response.code === 200) {
                    const post = response.data;
                    $('#viewTitle').text(post.title);
                    $('#viewCategory').text(post.categoryName);
                    $('#viewAuthor').text(post.authorName);
                    $('#viewViews').text(post.views);
                    $('#viewLikes').text(post.likes);
                    $('#viewCreateTime').text(new Date(post.createTime).toLocaleString());
                    
                    // 处理图片
                    let imagesHtml = '';
                    if (post.images) {
                        const imageArray = post.images.split(',');
                        imageArray.forEach(image => {
                            imagesHtml += `<img src="${image}" class="img-fluid mb-2" style="max-height: 300px; margin-right: 10px;">`;
                        });
                    }
                    $('#viewImages').html(imagesHtml);
                    
                    // 处理内容
                    $('#viewContent').html(post.content);
                    
                    $('#viewPostModal').modal('show');
                } else {
                    layui.layer.msg('获取美食日记信息失败: ' + response.msg, {icon: 2});
                }
            }).fail(function() {
                // 关闭加载动画
                layui.layer.close(loadingIndex);
                layui.layer.msg('网络错误，请稍后再试', {icon: 2});
            });
        });
        
        // 编辑美食日记
        $('.edit-post').click(function() {
            const postId = $(this).data('id');
            // 显示加载动画
            const loadingIndex = layui.layer.load(2, {shade: [0.2, '#000']});
            // 获取美食日记信息
            $.get('/api/admin/post/' + postId, function(response) {
                // 关闭加载动画
                layui.layer.close(loadingIndex);
                if (response.code === 200) {
                    const post = response.data;
                    $('#postId').val(post.id);
                    $('#editTitle').val(post.title);
                    $('#editCategory').val(post.categoryId);
                    $('#editContent').val(post.content);
                    $('#editPostModal').modal('show');
                } else {
                    layui.layer.msg('获取美食日记信息失败: ' + response.msg, {icon: 2});
                }
            }).fail(function() {
                // 关闭加载动画
                layui.layer.close(loadingIndex);
                layui.layer.msg('网络错误，请稍后再试', {icon: 2});
            });
        });
        
        // 保存美食日记信息
        $('#savePostBtn').click(function() {
            // 表单验证
            if (!$('#editTitle').val().trim()) {
                layui.layer.msg('标题不能为空', {icon: 2});
                $('#editTitle').focus();
                return;
            }
            
            if (!$('#editCategory').val()) {
                layui.layer.msg('请选择分类', {icon: 2});
                $('#editCategory').focus();
                return;
            }
            
            if (!$('#editContent').val().trim()) {
                layui.layer.msg('内容不能为空', {icon: 2});
                $('#editContent').focus();
                return;
            }
            
            const postId = $('#postId').val();
            const postData = {
                title: $('#editTitle').val().trim(),
                categoryId: $('#editCategory').val(),
                content: $('#editContent').val().trim()
            };
            
            // 显示加载动画
            const loadingIndex = layui.layer.load(2, {shade: [0.2, '#000']});
            
            $.ajax({
                url: '/api/admin/post/' + postId,
                type: 'PUT',
                contentType: 'application/json',
                data: JSON.stringify(postData),
                success: function(response) {
                    // 关闭加载动画
                    layui.layer.close(loadingIndex);
                    
                    if (response.code === 200) {
                        $('#editPostModal').modal('hide');
                        
                        // 使用更美观的成功提示窗口
                        layui.layer.open({
                            type: 1,
                            title: false,
                            closeBtn: 0,
                            area: ['350px', 'auto'],
                            shade: 0.8,
                            id: 'LAY_updateSuccess',
                            btn: ['确定'],
                            btnAlign: 'c',
                            moveType: 1,
                            time: 1500, // 设置1.5秒后自动关闭
                            content: '<div style="padding: 30px; line-height: 22px; background-color: #f8f8f8; color: #555; font-weight: 300; text-align: center;"><i class="fas fa-check-circle" style="font-size: 50px; color: #fd7e14; margin-bottom: 20px; display: block;"></i><div style="font-size: 18px; margin-bottom: 10px; font-weight: bold; color: #333;">更新成功</div><div>美食日记信息已成功更新</div></div>',
                            success: function(layero){
                                // 添加动画效果
                                $(layero).find('.layui-layer').addClass('layui-anim layui-anim-up');
                            },
                            end: function(){ // 弹窗关闭后刷新页面
                                window.location.reload();
                            },
                            yes: function(index){
                                layui.layer.close(index);
                                window.location.reload();
                            }
                        });
                    } else {
                        layui.layer.msg('更新失败: ' + response.msg, {icon: 2});
                    }
                },
                error: function(xhr) {
                    // 关闭加载动画
                    layui.layer.close(loadingIndex);
                    
                    let errorMsg = '服务器错误，请稍后再试';
                    if (xhr.responseJSON && xhr.responseJSON.msg) {
                        errorMsg = xhr.responseJSON.msg;
                    }
                    layui.layer.msg(errorMsg, {icon: 2});
                }
            });
        });
        
        // 删除美食日记
        $('.delete-post').click(function() {
            const postId = $(this).data('id');
            const title = $(this).data('title');
            $('#deletePostId').val(postId);
            $('#deleteTitle').text(title);
            $('#deletePostModal').modal('show');
        });
        
        // 确认删除
        $('#confirmDeleteBtn').click(function() {
            const postId = $('#deletePostId').val();
            
            $.ajax({
                url: '/api/admin/post/' + postId,
                type: 'DELETE',
                success: function(response) {
                    if (response.code === 200) {
                        $('#deletePostModal').modal('hide');
                        // 使用更美观的成功提示窗口
                        layui.layer.open({
                            type: 1,
                            title: false,
                            closeBtn: 0,
                            area: ['350px', 'auto'],
                            shade: 0.8,
                            id: 'LAY_deleteSuccess',
                            btn: ['确定'],
                            btnAlign: 'c',
                            moveType: 1,
                            time: 1500, // 设置1.5秒后自动关闭
                            content: '<div style="padding: 30px; line-height: 22px; background-color: #f8f8f8; color: #555; font-weight: 300; text-align: center;"><i class="fas fa-check-circle" style="font-size: 50px; color: #28a745; margin-bottom: 20px; display: block;"></i><div style="font-size: 18px; margin-bottom: 10px; font-weight: bold; color: #333;">删除成功</div><div>美食日记已被成功删除</div></div>',
                            success: function(layero){
                                // 添加动画效果
                                $(layero).find('.layui-layer').addClass('layui-anim layui-anim-up');
                            },
                            end: function(){ // 弹窗关闭后刷新页面
                                window.location.reload();
                            },
                            yes: function(index){
                                layui.layer.close(index);
                                window.location.reload();
                            }
                        });
                    } else {
                        layui.layer.msg('删除失败: ' + response.msg, {icon: 2});
                    }
                },
                error: function() {
                    layui.layer.msg('服务器错误，请稍后再试', {icon: 2});
                }
            });
        });
        
        // 搜索功能
        $('#searchBtn').click(function() {
            const keyword = $('#searchInput').val().trim();
            window.location.href = '/admin/posts?keyword=' + encodeURIComponent(keyword);
        });
        
        // 回车搜索
        $('#searchInput').keypress(function(e) {
            if (e.which === 13) {
                $('#searchBtn').click();
            }
        });
    });
</script>

</body>
</html>